<template>
    <!-- 登录后 系统底部 -->
    <div class="inside-footer">
        <i class="iconfont icon-laba" />
        <div class="right-footer">
          <el-carousel
          height="40px"
          direction="vertical"
          :autoplay="true"
          :interval="3000"
          indicator-position="none"
          >
            <el-carousel-item v-for="item in 4" :key="item">
              <h3 text="2xl" justify="center" class="con-text" @click="handleViewNotice(item)">
                  通知：我是一条通知{{ item }}
              </h3>
            </el-carousel-item>
          </el-carousel>
        </div>
    </div>
</template>

<script setup>
// 点击通知，去查看通知详情
const handleViewNotice = (item) => {
  console.log('view notice',item)

}

</script>

<style lang="scss" scoped>
.inside-footer {
    height: 40px;
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9;
    display: flex;
    align-items: center;
    background-color: #3D6DCC;
    color: #fff;
    padding-left: 20px;
    .iconfont {
        font-size: 24px;
    }
    .right-footer {
        flex: 1;
        margin-left: 8px;
        font-size: 18px;
        .con-text {
            line-height: 40px;
            cursor: pointer;
        }
    }
}
</style>